@import "bourbon";
@import "neat";
@import "base/base";
@import "hero";
@import "navigation";
@import "flex-boxes";
@import "join";
@import "blog";

html,
body {
  margin: 0;
}


.comment-list {
  width: 65%;
  margin: auto;
}


.post {
  padding: 2em;

  .post-content {
    width: 65%;
    margin: auto auto 3em;
    font-size: 18px;
    font-weight: lighter;
  }


  .new-comment {
    width: 65%;
    margin: auto;
    textarea {
      height: 5em;
      margin: 1em 0;
    }


    input {
      width: 100%;
    }

  }


  .inline-comment {
    input {
      display: inline;
    }


    input[type='text'] {
      width: 50%;
      font-size: 14px;
    }


    input[type='button'] {
      font-size: 13px;
      margin: 5px;
    }

  }

}


.dashboard {
  width: 60%;
  margin: 5em auto auto;
  h1 {
    display: block;
    margin: 1em;
  }

}


.manage-post {
  .manage-action {
    display: inline-block;
    padding-left: 1em;
    a {
      font-size: 16px;
      padding: 0 0.2em;
      color: #2d5c87;
      text-decoration: underline;
    }

  }

}


.edit-post,
.new-post {
  width: 65%;
  margin: auto;

  textarea {
    height: 26em;
    margin-top: 1em;
  }


  select {
    width: 8%;
    display: inline;
    margin: auto auto auto 1em;
    padding: 0.3em;
  }


  input[type='text'] {
    width: 90%;
    display: inline;
  }


  input[type='button'] {
    padding: 0.7em 2em;
    float: right;
  }

}


.cards {
  @include display(flex);
  @include flex-wrap(wrap);
  @include justify-content(space-between);

  padding: 3em;
}

.card {
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  $card-border-color: $base-border-color;
  $card-border: 1px solid $card-border-color;
  $card-background: lighten($card-border-color, 10%);
  $card-header-background: $card-background;
  $card-margin: 1em;
  $card-image-hover-opacity: 0.7;
  $card-image-hover-color: #F8F2B4;

  @include flex-basis(15em);
  @include flex-grow(1);
  @include transition (all 0.2s ease-in-out);
  background-color: $card-background;
  border-radius: $base-border-radius;
  border: $card-border;
  box-shadow: 0 2px 4px darken($base-background-color, 10%);
  cursor: pointer;
  margin: 0 $card-margin $base-spacing $card-margin;
  position: relative;


  .card-image {
    overflow: hidden;
    height: 150px;
    max-height: 150px;
    background-color: $card-image-hover-color;

    img {
      @include transition (all 0.2s ease-in-out);
      border-top-left-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
      width: 100%;
      opacity: 1;
    }
  }

  .card-header {
    @include transition (all 0.2s ease-in-out);
    background-color: $card-header-background;
    border-bottom: $card-border;
    border-radius: $base-border-radius $base-border-radius 0 0;
    font-weight: bold;
    line-height: 1.5em;
    padding: ($base-spacing / 3) ($base-spacing / 2);
  }

  .card-copy {
    font-size: 0.9em;
    line-height: 1.5em;
    padding: ($base-spacing / 2) ($base-spacing / 2);

    p {
      margin: 0 0 ($base-spacing / 2);
    }
  }

  &:focus,
  &:hover {
    cursor: pointer;

    img {
      opacity: $card-image-hover-opacity;
    }
  }

  &:active {
    background-color: $card-background;

    .card-header {
      background-color: $card-background;
    }
  }
}


.comment{
  a{
    padding-right: 1em;
  }
}


.search{
  width: 65%;
  margin: auto;
  padding: 2em 5em;

  input{
    display: inline;
  }

  input[type='text']{
    margin-left: 1.5em;
    width: 80%;
    padding: 1em;
    font-size: 18px;
  }

  input[type='button']{
    padding: 1.4em 2em;
    margin: 1em;
  }
}
